<template>
	<div class="category">
		<!-- 切换的点击区域 -->
		<ul class="title-ul">
			<!-- 当点击事件的时候，标题的默认效果需要切换，选项卡之间也需要切换 -->
			<li  v-for="item in tabs" :key="item.id" :class="{ 'default' : iscur===item.id }" @click="iscur = item.id">
				{{item.name}}
				<span class="default-span"></span>
			</li>
		</ul>
		<CategoryTab1 v-if="iscur === 1"></CategoryTab1>
		<CategoryTab2 v-if="iscur === 2"></CategoryTab2>
		
		
	</div>
	
</template>

<script>
	import CategoryTab1 from './CategoryTab1.vue'
	import CategoryTab2 from './CategoryTab2.vue'
	export default{
		name:'Category',
		components:{
			CategoryTab1,
			CategoryTab2
		},
		data(){
			return{
				tabs : [
					{id:1,name:'热门度假'},
					{id:2,name:'热门景点'},
				],
				iscur : 1//默认选中第一个标题以及第一个组件
			}
		}
		
	}
</script>

<style scoped>
	.category{
		width: 90%;
		margin: 2rem auto;
		height: 23rem;
	}
	.category .title-ul{
		height: 3rem;
		background-color: #eeeeee;
		width: 100%;
		border-radius: 0.8rem;
		display: flex;/* 弹性盒子 */
		align-items: center;/* 垂直居中 */
	}
	.category .title-ul li{
		width: 50%;
		text-align: center;
		line-height: 3rem;
		font-size: 0.8rem;
		font-weight: bold;
		border-radius: 0.3rem;
		position: relative;/* 相对定位 */
	}
	.category .title-ul .default{
		background-color: white;
		border-radius: 0.8rem;
		
	}
	.category .title-ul .default .default-span{
		display: block;
		background-color: gold;
		height: 0.25rem;
		width: 3.2rem;
		position: absolute;/* 绝对定位 */
		left: 39%;
		bottom: 18%;
	}
	
	.category p{
		width: 99%;
		line-height: 2.5rem;
		text-align: center;
		border: 0.01rem solid gray;
		border-radius: 6rem;
	}
</style>
